<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>活动</title>
    <link href="//res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css" rel="stylesheet">
    <style>
        body {
            max-width: 750px;
            margin: 0 auto;
            background: #f8f8f8;
        }
        pre {
            font-family: "微软雅黑";
            white-space: pre-wrap;
            word-wrap: break-word;
        }
        img {
            width: 100%;
            display: block;
        }

        .pop {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 1000;
            background: rgba(0, 0, 0, 0.85);
            text-align: center;
            display: none;
        }

        .pop p {
            position: absolute;
            right: 30px;
            top: 30px;
            color: #fff;
        }

        .rule {
            padding: 15px;
        }

        .rule p {
            font-size: 14px;
            margin-top: 10px;
            color: #333;
        }

        h3 {
            text-align: center;
            padding: 20px 0 15px;
            background: #0085ff;
            color: #fff;
        }

        .weui-btn {
            margin: 15px;
            background: #0085ff !important;
        }

        .js-list {
            background: #0085ff;
            padding: 15px;
            border-top: 1px dashed #fff;
            color: #fff;
        }

        .notice {
            font-size: 14px;
            padding: 10px;
        }

        .gzh {
            text-decoration: underline;
        }
    </style>
    <script src="//res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
</head>

<body>
<h3 th:text="${title}"></h3>

<!--<img src="https://botii.oss-cn-shenzhen.aliyuncs.com/mp/30-10.jpg" style="width: 100%;" alt="">-->
<p style="text-align: center; margin-top: 10px;" class="js-score" th:text="'您当前剩余积分为:'+${integration}"></p>
<div id="phone" class="form js-phone">
    <div class="weui-cells__title">请输入您的饿了么账号</div>
    <div class="weui-cells">
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <input class="weui-input" type="text" placeholder="11位手机号码" id="tel" maxlength="11" th:value="${phone}">
            </div>
        </div>
    </div>
    <!--<a href="javascript:;" class="weui-btn weui-btn_primary">活动已下线</a>-->
    <a onclick="start()" href="javascript:" class="weui-btn weui-btn_primary js-next1">下一步</a>
</div>

<div id="image_code" class="form js-captcha" style="display: none">
    <div class="weui-cells__title">请输入图形验证码</div>
    <div class="weui-cells">
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <img style="width: 100px; display: inline-block; margin-right: 5px;" class="js-captcha-img" src=""
                     alt="">
                <span onclick="start()" style="color: #999; font-size: 14px;">看不清？点我刷新</span>
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <input class="weui-input" type="text" placeholder="图形验证码" id="captcha">
            </div>
        </div>
    </div>
    <a onclick="captcha()" href="javascript:" class="weui-btn weui-btn_primary js-next1">下一步</a>
</div>

<div id="phone_code" class="form js-code" style="display: none">
    <div class="weui-cells__title">请输入您收到的手机短信验证码</div>
    <div class="weui-cells">
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <input class="weui-input" type="tel" placeholder="短信验证码" id="smsCode" maxlength="6">
            </div>
        </div>
    </div>
    <a onclick="sms()" id="next2" href="javascript:" class="weui-btn weui-btn_primary js-next2">下一步</a>
</div>
<div id="div_success" class="form js-success" style="display: none">
    <p id="success" style="padding: 15px; background: #0085ff; color: #fff;"></p>
    <div class="js-list">

    </div>
</div>

<div id="div_fail" class="form js-fail" style="display: none">
    <p id="fail" style="padding: 15px; background: #0085ff; color: #fff;"></p>
    <div class="js-list">

    </div>
</div>
<div class="rule">
    <h4>领取规则：</h4>
    <br/>
    <div>1、领取饿了么超级会员体验卡需消耗5积分，领取失败不扣积分</div>
    <br/>
    <div>2、每个手机号限领1次（非会员可以领取）</div>
    <br/>
    <div>3、部分用户长的过于好看会领取失败，原因不详</div>
</div>
<input id="platform" type="hidden" th:value="${platform}">
<input id="title" type="hidden" th:value="${title}">
<input id="openId" type="hidden" th:value="${openId}">
</body>
</html>
<script>
    var phone = null;
    var platform = null;
    var $next1 = $('.js-next1');
    var token = null;
    var captcha_hash = null;
    var openId = null;
    function start(){
        phone = $("#tel").val();
        platform = $("#platform").val();
        openId = $("#openId").val();
        if(phone==null||phone==''||phone.length<11){
            alert("手机号不能为空");
            return;
        }
        $next1.prop("disabled", true);
        $next1.text("请稍候...");
        $.post("/sendSMS", {'phone':phone, 'platform':platform,'openId':openId}, function (data) {
            if(data.code=='200'){
                document.getElementById("phone").style.display='none';
                document.getElementById("image_code").style.display='block';
                $('.js-captcha-img').attr('src', data.data.captcha_image);
                captcha_hash = data.data.captcha_hash;
            }
            if(data.code=='300'){
                alert("积分不足");
                window.location.href=data.msg
            }
            if(data.code=='500'){
                alert(data.msg)
            }
            $next1.prop("disabled", false);
            $next1.text("下一步")
        })
    }
    function captcha(){
        var captcha = $("#captcha").val();
        if(captcha==null||captcha==''||captcha.length<4){
            alert("验证码不能为空");
            return;
        }
        $next1.prop("disabled", true);
        $next1.text("请稍候...");
        $.post("/captcha", {'captcha':captcha,'hash':captcha_hash, 'phone':phone}, function (data) {
            if(data.code==200){
                document.getElementById("image_code").style.display='none';
                document.getElementById("phone_code").style.display='block';
                token = data.data
            }else{
                alert(data.msg)
            }

        });
        $next1.prop("disabled", false);
        $next1.text("下一步")
    }
    function sms(){
        var smsCode = $("#smsCode").val();
        if(smsCode==null||smsCode==''||smsCode.length<4){
            alert("验证码不能为空");
            return;
        }
        $("#next2").prop("disabled", true);
        $("#next2").text("正在领取请稍候...");
        $.post("/checkPhoneCode", {'smsCode':smsCode,'token':token,'phone':phone, 'platform':platform,'openId':openId}, function (data) {
            document.getElementById("phone_code").style.display='none';
            if(data.code==200){
                document.getElementById("image_code").style.display='none';
                document.getElementById("div_success").style.display='block';
                $("#success").html(data.data)
            }else{
                document.getElementById("div_fail").style.display='block';
                $("#fail").html(data.msg)
            }

        })

    }
</script>
